import React, { Component } from 'react'
import { Spin, Alert, Card, Icon } from 'antd'
import './ui.less'

export default class Loadings extends Component {
  render() {
    const loadings = <Icon type="loading" />
    return (
      <div>
        <Card title="Spin用法" className="card-wrap">
          <Spin size="small" />
          <Spin style={{ margin: '0 10px' }} />
          <Spin style={{ marginRight: 10 }} size="large" />
          <Spin indicator={loadings} style={{ fontSize: 20 }} />
        </Card>
        <Card title="内容遮罩">
          <Alert
            message="今天学习react了吗？"
            type="info"
            description="嘿嘿嘿"
            style={{marginBottom: 10}}
          />
          <Spin >
            <Alert style={{marginBottom: 10}}
              message="今天学习react了吗？"
              type="info"
              description="嘿嘿嘿"
            />
          </Spin>
          <Spin tip="加载中">
            <Alert style={{marginBottom: 10}}
              message="今天学习react了吗？"
              type="info"
              description="嘿嘿嘿"
            />
          </Spin>
          <Spin indicator={loadings}>
            <Alert
              style={{marginBottom: 10}}
              message="今天学习react了吗？"
              type="info"
              description="嘿嘿嘿"
            />
          </Spin>
        </Card>
      </div>
    )
  }
}
